﻿@model ElCharro01.Models.Variant
@using ElCharro01.Models;
@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!--Script Fencybox -->
<script type="text/javascript">
    $(document).ready(function () {
        /*
        *   Examples - images
        */

        $("a#example1").fancybox();

        $("a#example2").fancybox({
            'overlayShow': false,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic'
        });

        $("a#example3").fancybox({
            'transitionIn': 'none',
            'transitionOut': 'none'
        });

        $("a#example4").fancybox({
            'opacity': true,
            'overlayShow': false,
            'transitionIn': 'elastic',
            'transitionOut': 'none'
        });

        $("a#example5").fancybox();

        $(".grouped_elements").fancybox({
            'titlePosition': 'outside',
            'overlayColor': '#000',
            'overlayOpacity': 0.9,
            'transitionIn': 'elastic',
            'showCloseButton': true,
            'showNavArrows': true,
            'transitionOut': 'elastic',
            'titlePosition': 'inside',
            'titleFormat': 'formatTitle',
            'cyclic': true,
            'autoScale': true,
            'scrolling': 'yes',
            'enableEscapeButton': 'true'

        });

        $("a#example7").fancybox({
            'titlePosition': 'inside'
        });

        $("a#example8").fancybox({
            'titlePosition': 'over'
        });

        $("a[rel=example_group]").fancybox({
            'transitionIn': 'none',
            'transitionOut': 'none',
            'titlePosition': 'over',
            'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
            }
        });

        /*
        *   Examples - various
        */

        $("#various1").fancybox({
            'titlePosition': 'inside',
            'transitionIn': 'none',
            'transitionOut': 'none'
        });

        $("#various2").fancybox();

        $("#various3").fancybox({
            'width': '75%',
            'height': '75%',
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'iframe'
        });

        $("#various4").fancybox({
            'padding': 0,
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none'
        });
    });
</script>
<script type="text/javascript">
    function showCart() {

        $.ajax({
            type: 'POST',
            url: '/Cart/AddToCart',
            data: 'quantity=$("#quantita").val&variantId=@Model.ID'

        });
    }

</script>
<div id="product-content" class="grid_10 alpha omega">
    <div class="product grid_10 alpha omega">
        <div class="image-util product-view grid_4 alpha omega">
            <a class="grouped_elements paddaloPoco" rel="group" href="/Content/Images/Raw/@Model.Image.First().Path">
                <img height="350" width="300" src="/Content/Images/Raw/@Model.Image.First().Path" alt=""/></a>
            @*carico le immagini del prodotto in un div che le nasconde, verranno visualizzate in una gallery in seguito al click sull'immagine principale*@
            <ul>
                @foreach (ElCharro01.Models.Image Image in ViewBag.ImgList)
                {
                    <li class="hidden"><a class="grouped_elements paddaloPoco" rel="group" href="/Content/Images/Raw/@Image.Path">
                        <img height="350" width="300" src="/Content/Images/Raw/@Image.Path" alt=""/></a>
                    </li>
                }
            </ul>
            <div class="colorSquareContainer">
                @foreach (Variant variante in ViewBag.SizedVariants)
                {
                    <a class="paddalo" href="@Url.Action("Details", "Variant", new { id = variante.ID, colour = variante.Colore, size = Model.Taglia })">
                        <span class="colorSquare" style="background-color: #@variante.CodiceColore"></span>
                    </a> 
                }
            </div>
        </div>
        <div class="vertical-positioner grid_6 alpha omega">
            <div class="product-form">
                <div class="info">
                    <h2 class="name">
                        Nome Prodotto: @Model.Product.Nome</h2>
                    <div class="price">
                        <h4 class="offer-price">
                            Prezzo Unitario @Model.PrezzoUnitario €</h4>
                        <p class="copy">
                            Descrizione: @Model.Product.Descrizione</p>
                    </div>
                    <p class="copy">
                        Colore: @Model.Colore</p>
                </div>
                @using (Html.BeginForm("Details", "Variant", new { variantId = Model.ID }))
                {
                    <div class="display-label">
                        Taglia</div>
                    <div class="display-field">
                        @Html.DropDownList("size", new SelectList(ViewBag.SizeVariants, Model.Taglia), new { onchange = "this.form.submit();" })
                    </div>
                    if (ViewBag.IsInStock)
                    {
                    <div class="display-label">
                        Colore</div>
                    <div class="display-field">
                        @Html.DropDownList("colour", new SelectList(ViewBag.ColourVariants, Model.Colore), new { onchange = "this.form.submit();" })
                    </div> 
                    }
                }
                @if (Model.InStock == 0)
                {
                    <div class="paddaloTop reddalo">
                        Prodotto Esaurito
                    </div>
                }
                else
                {

                    if (ViewBag.IsInStock)
                    {
                    <div class="display-label">
                        Quantità da ordinare:
                    </div>
                        using (Html.BeginForm("AddToCart", "Cart", new { variantId = Model.ID }))
                        {
                    <div id="quantita">
                        @Html.DropDownList("quantity", new SelectList(Enumerable.Range(1, Model.InStock)))
                    </div>
                    <p class="right">
                        <button onclick="showCart()">
                            Aggiungi Al Carrello</button>
                    </p>
                        }
                    }
                    else
                    {
                    <div class="paddaloTop reddalo">
                        Prodotto Esaurito
                    </div>
                    }
                }
            </div>
        </div>
        <div class="prefix_3 grid_7">
            @if ((int)Session["clothingTypeId"] != 0)
            {
                @Html.ActionLink("Torna Alla Lista Dei Prodotti", "ShowSelectedProducts", "Product", new { CategoryId = 0, ClothingTypeID = 0 }, new { area = "User" })
            }

            else
            {
                <span>&nbsp</span>
            }
        </div>
    </div>
</div>
